<template>
  <div class="myChart" ref="myChart"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { TwoChart } from "@/apis/echartsData/echartData.js";
const myChart = ref(null);
onMounted(() => {
  let ECharts = echarts.init(myChart.value);
  ECharts.showLoading();
  TwoChart().then((res) => {
    ECharts.hideLoading();
    let option = {
      grid: {
        x: 50,
        y: 50,
        x2: 50,
        y2: 60,
        containLable: true,
      },
      title: {
        text: "库存统计",
        left: "center",
        textStyle: {
          color: "#fff",
          fontSize: 20,
        },
      },
      legend: {
        top: "bottom",
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: "pie",
          data: res.data,
          radius: [10, 100],
          center: ["50%", "45%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 10,
          },
        },
      ],
    };
    ECharts.setOption(option);
  });
});
</script>


<style lang="less" scoped>
.myChart {
  height: 21rem;
  border: 1px solid blue;
  margin: 1.25rem;
  background-color: rgba(12, 130, 255, 0.65);
  padding-top: 1rem;
}
</style>